<!--
 * @Author: your name
 * @Date: 2021-08-04 17:26:18
 * @LastEditTime: 2021-08-05 14:32:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briupf:\Web课后练习成果\HTML\htmlDay03.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>htmlDay03</title>
</head>
<body>
    <!-- table表格新添的内容 -->
    <table align="center" style="width: 80px; border: 1px solid;">
        <!-- caption是标题标签，可以直接合并表格的列展示在表格的第一行，是table的子标签 -->
        <caption>标签</caption>
        <!-- colgroup可以设置整列，列分组，colgroup还有子元素col表示列 -->
        <colgroup>
            <col style="background-color: pink;">
            <!-- col中使用span的标签还可以将几列一起设置同样的样式 -->
            <col span="2" style="background-color: blue;">
        </colgroup>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>


    <!-- form表单，action是指用来处理表单信息的服务器地址，即表单提交的地址 -->
    <!-- method是指表单提交的方式，主要有两种get和post方法 -->
    <!-- get方法会将表单数据显示在提交的链接上，post方法则不会显示在提交的连接上，比较隐私 -->
    <form action="" method="GET">
        <!-- input标签属性主要有name\id\type\value -->
        <!-- name是指用来设置控件的名称和用来提交数据时的属性名 -->
        <!-- id是指可以用来绑定 -->
        <!-- type可以设置输入框是什么样式的,比如:text是指文本格式的输入;
        password是指密码框,密码的显示是以小圆点的方式来展示的;
        checkbox是指复选框,可以多选;
        radio是指单选框 ,将name设置为一样的则可以实现同组互斥,不能同时选中两个;
        file是指上传文件;
        hidden是指隐藏,在页面中不会展示这一行,但是使用get方法提交的话,会在提交连接中展示hidden的value值
        week可以在浏览器的页面当中选中第几周;
        reset是指重置,点击即可将页面设置的内容进行重置 -->

        用户名:
        <input type="text" name="username" id="name"><br>
        密码:
        <input type="password" name="password" id="password"><br>
        复选框:
        <!-- checked默认选中 -->
        <input checked type="checkbox" name="checked" id="checked" value="checked">
        <label for="checked">复选框</label>
        <br>
        水果;
        <input type="radio" name="fruit" id="banana" value="banana">
        <label for="banana">香蕉</label>
        <input type="radio" name="fruit" id="apple" value="apple">
        <label for="apple">苹果</label>
        <br>
        上传文件:
        <input type="file" name="file" id="file">
        <br>
        隐藏:
        <input type="hidden" name="hidden" value="用户你好!">
        <br>
        第几周:
        <input type="week" name="week" id="week">
        <br>
        <input type="reset" value="重置">
        <br>
        <input type="submit" value="提交"><br>
    </form>
    

    <form action="" method="GET">
        <!-- size是指控件的初始宽度,单位是像素(px),但是text和password只显示可容纳的数目 -->
    用户名:
        <input type="text" name="username" size="6">
        <br>
        用户名:
        <!-- maxlength是指可以输入的字符最大是多少 -->
        <input type="text" name="username" maxlength="3">
        <br>
        数字框:
        <!-- min和max只能在number框中使用,是指输入数字的范围,最小和最大为多少 -->
        <input type="number" name="num" id="num" min="0" max="5">
        <br>
    </form>


    <form action="" method="GET">
        <!-- 列表select和option元素一起使用,可以形成下拉列表 -->
        列表:
        <!-- multiple指定控件类型是列表还是下拉列表 -->
        <!-- size则表示同时展示的行数 -->
        <select name="select" id="select" multiple>
            <option value="A">1</option>
            <option value="A">2</option>
            <option value="A">3</option>
            <option value="A">4</option>
            <option value="A">5</option>
            <option value="A">6</option>
        </select>
        <br>
        列表:
        <select name="select" id="select" multiple size="2">
            <option value="A">1</option>
            <option value="A">2</option>
            <option value="A">3</option>
            <option value="A">4</option>
            <option value="A">5</option>
            <option value="A">6</option>
        </select>
        <br>
        下拉列表:
        <select name="select" id="select">
            <!-- disabled表示禁用控件;selected表示默认选择 -->
            <option disabled selected value="A">请选择</option>
            <option value="A">1</option>
            <option value="A">2</option>
            <option value="A">3</option>
            <option value="A">4</option>
            <option value="A">5</option>
            <option value="A">6</option>
        </select>
        <br>
        列表组:
        <select name="select" id="select">
            <!-- optgroup表示的是将列表分为不同组进行选择 -->
            <optgroup label="第一组">
            <option disabled selected value="A">请选择</option>
            <option value="A">1</option>
            <option value="A">2</option>
            <option value="A">3</option>
            <option value="A">4</option>
            <option value="A">5</option>
            <option value="A">6</option>
            </optgroup>
            <optgroup label="第二组">
                <option disabled selected value="A">请选择</option>
                <option value="A">7</option>
                <option value="A">8</option>
                <option value="A">9</option>
                <option value="A">10</option>
                <option value="A">11</option>
                <option value="A">12</option>
            </optgroup>
        </select>
            <br>
    

        <!-- textarea的使用 -->
        <div>
            <form action="" method="GET">
            <!-- textarea可以设置文本内容的框有多少行多少列,通过cols和rows来设置 ;框也可以随意拉大拉小,不够的话会产生滚动条-->
            <textarea name="text" id="text" cols="30" rows="10" >请输入文本内容</textarea>
        </form>
        </div>
        <div>
            <form action="" method="GET">
                <!-- fieldset是指在表单中可以用线将每一组内容都框起来,实现对表单的分组 -->
                <fieldset>
                    <legend>个人信息</legend>
                    姓名：<input type="text" name="" id="">
                    密码：<input type="password" name="" id="">
                </fieldset>
                <fieldset disabled>
                    <!-- 在其中可以使用disabled将其禁用 -->
                    <legend>家长信息</legend>
                    姓名：<input type="text" name="" id="">
                    密码：<input type="password" name="" id="">
                </fieldset>
            </form>
        </div>

        <!-- progress进度条 -->
        <div>
            <form action="" method="GET">
            <!-- progress可以显示进度条,但是是静态的最大值可以自己设置,不设置的话默认值为1,value为0-1之间的小数 -->
            <progress max="100" value="50">50%</progress>
            </form>
            <!-- output表示用户动作产生的结果,可以用来计算,只要将计算的公式写到form中即可 -->
            <form oninput="result.value=num.value*num.value">
                <input type="number" name="num">的平方
                <output name="result"></output>
            </form>
            <br/>
            <form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
            <input type="number" name="num1" value="0">+
            <input type="number" name="num2" value="0">=
            <output name="result"></output>
            </form>
        </div>
        <!-- meter表示进度条,有三种状态 -->
        <div>
            <form action="" method="GET">
                <meter min="0" max="100" low="60" high="90" value="40"></meter>40
            <meter min="0" max="100" low="60" high="90" value="75"></meter>75
            <meter min="0" max="100" low="60" high="90" value="95"></meter>95
            </form>
        </div>
        <!-- datalist表示其他控件可用的值
            datalist的使用要先绑定
        -->
        <div>
            <form action="">
                <label>
                    <input list="myData" name="myData">
                </label>
                    <datalist id="myData">
                        <option value="chrome">谷歌</option>
                        <option value="fireFox">火狐</option>
                        <option value="360">360</option>
                        <option value="train">火车</option>
                        <option value="one">123</option>
                    </datalist>
            </form>
        </div>

        <!-- H5中对input的扩展 -->
        <!-- autofocus 自动聚焦 -->
        <form action="" method="GET">
            用户名:
            <input type="text" name="username" id="name" autofocus><br>
            密码:
            <input type="password" name="password" id="password"><br>
        </form>
        <!-- placeholder 提示 -->
        <form action="" method="GET">
            用户名:
            <input type="text" name="username" id="name" placeholder="请输入用户名"><br>
            密码:
            <input type="password" name="password" id="password"><br>
        </form>
        <!-- required 必填项，填上才能提交 -->
        <form action="" method="GET">
            用户名:
            <input type="text" name="username" id="name" required><br>
            密码:
            <input type="password" name="password" id="password" required><br>
            <input type="submit" value="提交">
        </form>
        <!-- pattern 正则表达式，用来验证内容框中的内容 -->
        <form action="" method="GET">
            手机号:
            <input type="number" name="num" id="num" pattern="1\d{10}"><br>
            <input type="submit" value="提交">
        </form>
</body>
</html>